<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>用户注册页</title>
  <style>
    #mainDiv {

      border: 1px solid black;
      /* 整个div设置宽度和高度*/
      width: 420px;
      height: 260px;;

      /* 边框圆角  像素弧度大小 */
      border-radius: 5px;
      /* 上 右  下 左*/
      margin:80px 0 0  300px;
    }
    #userDiv{
      margin: 20px 0 0 100px;
    }
    /* 给id="pwdDiv"控制样式 */
    #pwdDiv{
      margin: 20px 0 0 100px;
    }
    #nameDiv{
      margin: 20px 0 0 100px;
    }
    #emailDiv{
      margin: 20px 0 0 100px;
    }
    #sexDiv{
      margin: 20px 0 0 100px;
    }
    #tip{
      margin: 20px 0 0 100px;
      font-size: 13px;
    }
    #btnDiv{
      margin: 20px 0 0 180px;
    }

  </style>
  <!--导入jquery的js库-->
  <script src="js/jquery-3.4.1.min.js"></script>

  <script>
        //jquery的页面载入事件
        $(function (){

          //alert("页面载入事件触发") ;
          //完成用户名失去焦点
          $("#username").blur(function(){
               // alert("用户名失去焦点") ;

              //获取用户名的内容
            var username = $(this).val(); //$("#username").val() ;
           // alert(username) ;

            //获取id="tip"的span的jQuery对象
            var div = $("#tip") ;

            //Jquery的ajax发送异步请求,校验用户名
            $.ajax({
                "url": "/MavenProject_2211_war_exploded/checkUser?username="+username+"",
                "type":"get",
                "success":function (data){ //服务器响应成功的回调函数
                      //data:服务器过来的json数据
                      //alert(data) ; //{"code":xx,"msg":xxx}
                    if(data.code==1){
                      //用户查找到了
                      //给span标签对象设置文本
                      div.html(data.msg) ;
                      div.css("color","red") ;
                    }else{
                      div.html(data.msg) ;
                      div.css("color","green") ;
                    }
                },
               "dataType":"json"


            }) ;


          });
        }) ;

  </script>
</head>


<body>
<div id="mainDiv">
  <form action="${pageContext.request.contextPath}/adminUpdateUser" method="post">
    <div id="userDiv">

      用户昵称:<input type="text" name="username"  id="username"/>
    </div>
    <div id="tip"></div>
    <div id="pwdDiv">
      用户密码:<input type="password" name="password"  />
    </div>
    <div id="nameDiv">
      真实姓名:<input type="text" name="name"  />
    </div>
    <div id="emailDiv">
      用户邮箱:<input type="text" name="email"   />
    </div>
    <div id="sexDiv">
      用户性别:<input type="text" name="sex"   />
    </div>
    <div id="btnDiv">
      <input style="color: #87CEFA" type="submit" value="注册" />
    </div>
  </form>
</div>

</body>
</html>
